<template>
    <div class="approval-container">
       <div v-for="(boxItem,index) in approvalBox" :key="index">
        <p class="approvaler">{{boxItem.className}}<i class="el-icon-error" v-if="index===0?false:true" @click="reduce(index)"></i></p>
        <div class="checkbox-plane" >
            <div class="header" v-if="approvalerList.length ===0">请选择一个公司</div>
          <div v-for="(item,index) in boxItem.approvalerList" :key="index" v-else>
            <div class="header">
                <p>{{item[0].departmentName}}</p>
            </div>
            <div class="content ">
                 <el-checkbox-group v-model="boxItem.config" >
                       <el-checkbox
                           :disabled = 'nameItem.disabled'
                           v-for="(nameItem,index) in item"
                           :label="nameItem.id"
                           :key="nameItem.saleCode"
                           @change = "checkedApprovaler(nameItem,index)">{{nameItem.saleName}}</el-checkbox>
                  </el-checkbox-group>
            </div>
          </div>
        </div>
       </div>
        <el-button type="primary" @click="add">+ 添加审批层级</el-button>
    </div>
</template>

<script>
// import { getHuoYinCinemaList } from '@/api/public'
import { chinanum } from '@/utils'
export default {
  props: {
    value: {
      type: [Array, Object]
    },
    text: {
      type: Array,
      default: function () {
        return []
      }
    },
    department: String
  },
  data () {
    return {
      approvalBox: [{
        class: '1',
        className: '一级审批人',
        approvalerList: [],
        config: []
      }],
      valueNew: [],
      approvalerList: [],
      approvalerListAll: []
    }
  },
  watch: {
    value (val) {
      //    console.log('组件内的value', val, this.approvalerList)
      if (val) {
        if (val[0].class !== '') {
          var approvalBox = []
          for (var i = 0; i < val.length; i++) {
            var NewApprovalBox = {}
            NewApprovalBox.class = val[i].class
            NewApprovalBox.className = val[i].className
            NewApprovalBox.approvalerList = this.approvalerList
            var newConfig = []
            for (var j = 0; j < val[i].config.length; j++) {
              newConfig.push(val[i].config[j].id)
            }
            NewApprovalBox.config = newConfig
            approvalBox.push(NewApprovalBox)
          }
          this.approvalBox = approvalBox
          //        console.log('value拼好的approvalBox', approvalBox)
        } else {
          this.approvalBox = [{
            class: '1',
            className: '一级审批人',
            approvalerList: this.approvalerListAll,
            config: []
          }]
        }
      }
    },
    text (val) {
      if (val.length > 0) {
        this.getApprovalerList(val)
      } else {
        this.approvalerList = []
      }
    }
  },
  methods: {
    async getApprovalerList (value) {
      this.approvalerList = []
      if (value) {
        if (value.length !== 0) {
          var currData = []
          var currDataLast = []
          //        var flag = 0
          //        var allLength = 0
          // 遍历职员表value
          if (value.length > 1) {
            for (var i = 0; i < value.length; i++) {
              if (i !== value.length - 1) {
                if (value[i].departmentId !== value[i + 1].departmentId) {
                  currData = value.slice(0, i + 1)
                  currDataLast = value.slice(i + 1)
                }
              } else {
                if (value[i].departmentId === value[0].departmentId) {
                  currData = value
                }
              }
            }
            if (currDataLast.length === 0) {
              this.approvalerList = [currData]
            } else {
              this.approvalerList = [currData, currDataLast]
            }
            this.approvalerListAll = [currData]
          } else {
            this.approvalerList = [value]
          }
        }
      }
      if (this.value[0].class !== '') {
        for (var j = 0; j < this.approvalBox.length; j++) {
          this.approvalBox[j].approvalerList = this.approvalerList
        }
      } else {
        this.approvalBox = [{
          class: '1',
          className: '一级审批人',
          approvalerList: this.approvalerListAll,
          config: []
        }]
      }
    },
    add () {
      if (this.approvalBox[this.approvalBox.length - 1].config.length === 0 || this.approvalBox[this.approvalBox.length - 1].config === undefined) {
        this.$message.error('请选择上级审批人后再增加下一级')
      } else {
        var approvalBox = [{
          class: String(this.approvalBox.length + 1),
          className: chinanum(this.approvalBox.length + 1) + '级审批人',
          approvalerList: this.approvalerList,
          config: []
        }]
        for (var i in this.approvalerList) {
          for (var j in this.approvalerList[i]) {
            this.approvalerList[i][j].checked = false
          }
        }
        this.approvalBox = this.approvalBox.concat(approvalBox)
      }
    },
    reduce (index) {
      if (index === this.approvalBox.length - 1) {
        this.approvalBox.splice(index, 1)
      } else {
        this.$message.error('对不起，请先删除最后一级再进行操作')
      }
      this.$emit('input', this.approvalBox)
    },
    checkedApprovaler (nameItem, index) {
      this.$emit('input', this.approvalBox)
    }
  },
  async created () {
    if (this.text.length !== 0) {
      this.getApprovalerList()
    }
  }
}</script>

<style scoped lang="scss">
.approval-container .approvaler{
    margin: 0;
    .el-icon-error{
            position: absolute;
            right: 0;
            margin-top: 10px;
             color: #ccc;
               font-size: 20px;
    }
}
.approval-container .el-button{
    margin-top: 20px;
}
    .checkbox-plane {
        /*max-height: 240px;*/
        border: 1px solid #DCDFE6;
        border-radius: 4px;
        /*overflow-y: scroll;*/
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .header {
        height: 40px;
        display: flex;
        align-items: center;
        background-color: #F2F6FC;
        padding: 0 20px;
        border-bottom: 1px solid #DCDFE6;
    }

    .content {
        padding: 20px;
        margin: -10px 0px;
        margin-top: 0;
        max-height: 300px;
        overflow: auto;
        .check-item {
            margin: 10px 0px;
        }
    }

    .tag-plane {
        border: 1px solid #DCDFE6;
        border-radius: 4px;
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;
        padding: 10px;
        .selected-item {
            margin: 10px;
            height: 40px;
            line-height: 40px;
            width: 30%;
            border: 2px solid #3ca0ec;
            background-color: #fff;
            color: #999999;
            font-size: 14px;
            text-align: center;
        }
    }

</style>
